<template>
  <view class="box">
    <view class="top">
      <view class="top-text">常用</view>
      <view class="top-content">
        <navigator url="" hover-class="none" :class="{'disabled': !localData.ss_mc}">
          <view class="top-current">
            <image class="img" src="/static/image/消费码.png" mode="" />
            <text>消费码</text>
          </view>
        </navigator>
        <navigator url="" hover-class="none" :class="{'disabled': !localData.ss_mc}">
          <view class="top-current">
            <image class="img" src="/static/image/智能门锁.png" mode="" />
            <text>开门</text>
          </view>
        </navigator>
      </view>
    </view>

    <view class="main">
      <view class="main-box">
        <!-- <navigator url="" hover-class="none" :class="{'disabled': !localData.ss_mc}">
          <view class="main-current">
            <image src="/static/图标/01校园卡.png" mode="" />
            <text>校园卡</text>
          </view>
        </navigator> -->
        <navigator :class="{'disabled': !isLogin}" url="/flat/index/index" hover-class="none">
          <view class="main-current">
            <image src="/static/图标/02公寓租赁.png" mode="" />
            <text>公寓管理</text>
          </view>
        </navigator>
        <!--     <navigator url="/reservation/HomeView/HomeView" hover-class="none" :class="{'disabled': !localData.ss_mc}">
          <view class="main-current">
            <image src="/static/图标/05场馆预约.png" mode="" />
            <text>场馆预约</text>
          </view>
        </navigator> -->
        <!--    <navigator url="" hover-class="none" :class="{'disabled': !localData.ss_mc}">
          <view class="main-current">
            <image src="/static/图标/06健身器材.png" mode="" />
            <text>体育器材</text>
          </view>
        </navigator>
        <navigator url="" hover-class="none" :class="{'disabled': !localData.ss_mc}">
          <view class="main-current">
            <image src="/static/图标/07食品留样.png" mode="" />
            <text>食品留样</text>
          </view>
        </navigator> -->
        <navigator v-if="isLogin && ['superAdmin', 'admin'].includes(role)" url="/blueTooth/findBluetooth/findBluetooth"
          hover-class="none">
          <view class="main-current">
            <image src="/static/图标/08设备录入.png" mode="" />
            <text>设备录入</text>
          </view>
        </navigator>
        <!--     <navigator url="/life/repair/repair" hover-class="none" :class="{'disabled': !isLogin}">
          <view class="main-current">
            <image src="/static/图标/11的修.png" mode="" />
            <text>报修服务</text>
          </view>
        </navigator> -->
        <!-- <navigator url="/life/living/living" hover-class="none" :class="{'disabled': !localData.ss_mc}">
          <view class="main-current">
            <image src="/static/图标/12生活服务.png" mode="" />
            <text>生活服务</text>
          </view>
        </navigator> -->
      </view>
    </view>
  </view>
</template>

<script>
  import {
    ajax
  } from "../../utils/request.js";
  export default {
    data() {
      return {
        localData: {
          ss_mc: '', // 从本地存储获取的实际值
        },
        role: "",
        isLogin: false,
        userInfo: {},
        hasUserInfo: false,
        canIUse: uni.canIUse("button.open-type.getUserInfo"),
        canIUseGetUserProfile: false,
        canIUseOpenData: uni.canIUse("open-data.type.userAvatarUrl") &&
          uni.canIUse("open-data.type.userNickName"), // 如需尝试获取用户信息可改为false
      };
    },
    onShow() {
      this.role = uni.getStorageSync("role") || "defaultRole";
      this.isLogin = uni.getStorageSync("islogin");

      const localData = uni.getStorageSync('userInfo') || {
        name: "魏庆川",
        account: "202444060110",
        phone: "未提供",
        major: "建筑设计",
        className: "24建筑设计专升本1班",
        ss_mc: "" // 假设为空
      };
      this.localData = localData;

    },

    onLoad() {
      // this.showModal();
    },
    methods: {
      getSharelocker() {
        uni.navigateTo({
          url: "/pages/sharelocker/sharelocker",
        });
      },
      getSample() {
        uni.navigateTo({
          url: "/pages/sample/sample",
        });
      },
      bindViewTap() {
        uni.navigateTo({
          url: "../logs/logs",
        });
      },
      getUserInfo() {
        uni.getUserProfile({
          desc: "Weixin", // 这个参数是必须的
          success: (res) => {
            console.log(res.userInfo);
            uni.setStorageSync("userInfo", res.userInfo);
            this.userInfo = res.userInfo;
            this.hasUserInfo = true;
          },
          fail: (err) => {
            console.error("获取用户信息失败:", err);
            uni.showToast({
              title: "获取用户信息失败",
              icon: "none",
            });
          },
        });
      },
      showModal() {
        uni.showModal({
          title: "获取用户信息",
          content: "是否授权获取您的用户信息？",
          success: (res) => {
            if (res.confirm) {
              this.getUserInfo();
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      },
    },
  };
</script>

<style>
  .title {
    text-align: center;
    font-weight: bold;
    letter-spacing: 14px;
    font-size: 20px;
    margin: 2% 0;
  }

  .box {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 15px;
  }

  .top {
    width: 90%;
    height: 150px;
    margin-top: 5%;
    background-color: #2ba245;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
  }

  .top-text {
    font-size: 15px;
    padding-left: 3%;
    font-weight: 700;
    color: #fff;
  }

  .top-content {
    width: 100%;
    flex-grow: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .top-content navigator {
    display: flex;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    border: 1px solid #fff;
  }

  .top-content navigator:active {
    transform: scale(0.95);
    background-color: rgba(255, 255, 255, 0.1);
  }

  .top-current text {
    color: white;
    font-size: 15px;
  }

  .top-current .img {
    margin-bottom: 10px;
  }

  .main {
    margin-top: 5%;
    display: flex;
    width: 90%;
    border-radius: 15px;
    justify-content: center;
  }

  .main-box {
    height: auto;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
  }

  .main-box navigator {
    background-color: #2ba245;
    box-shadow: 0px 2px 1px 0 rgba(0, 0, 0, .5);
    color: #fff;
    border-radius: 10%;
    margin: 2px;
  }

  .main-box navigator:active {
    transform: scale(0.95);
  }

  .main-current {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font-size: 15px;
    height: 80%;
    padding: 10px;
  }

  .main-current image {
    width: 40px;
    height: 40px;
  }

  .top-current image {
    width: 50px;
    height: 35px;
  }

  .main-cspt image {
    width: 40px;
    height: 35px;
    margin-bottom: 20px;
  }

  .main-lock image {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }

  .top-current {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .main-drip image {
    width: 30px;
    height: 30px;
    margin-bottom: 20px;
  }

  .main-light image {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
  }

  .main-motion image {
    width: 40px;
    height: 35px;
    margin-bottom: 20px;
  }

  .main-sharelocker image {
    width: 45px;
    height: 35px;
  }

  .disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(50%);
  }
</style>